<div class="pt10" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="start center" fxLayoutGap="16px">
  <a mat-button [matMenuTriggerFor]="menu">
    <span [innerHTML]="param.catName||'/' |categoryName "></span>
    <i class="fa fa-caret-down pl5"></i>
  </a>
  <mat-menu #menu="matMenu">
    <div style="max-height: 400px;overflow-y: auto ;background: #fff;">
      <button mat-menu-item (click)="catNameChange()">全类目</button>
      <button mat-menu-item (click)="catNameChange(menu.categoryName)" *ngFor="let menu of catNameList;let $index = index;">{{menu.categoryName | categoryName}}</button>
    </div>
  </mat-menu>
  <mat-radio-group [(ngModel)]="shopType" class="mat-primary" (ngModelChange)="shopTypeChange($event)">
    <mat-radio-button value="" [checked]="shopType ==''" color="primary">全网</mat-radio-button>
    <mat-radio-button value="C店" [checked]="shopType =='C店'" color="primary">淘宝</mat-radio-button>
    <mat-radio-button value="商城" [checked]="shopType =='商城'" color="primary">天猫</mat-radio-button>
    <mat-radio-button value="天猫国际" [checked]="shopType =='天猫国际'" color="primary">天猫国际</mat-radio-button>
    <mat-radio-button value="全球购" [checked]="shopType =='全球购'" color="primary">全球购</mat-radio-button>
  </mat-radio-group>
  <mat-form-field>
    <input matInput [placeholder]="'宝贝搜索'|translate" [(ngModel)]="param.q" />
    <mat-icon matPrefix fontIcon="fa-search"></mat-icon>
  </mat-form-field>
  <button [color]="'primary'" mat-raised-button (click)="search()">{{'确定'|translate}}</button>
</div>
<div style="position: relative;" class="mt10">
  <mat-card>
    <mat-card-title class="clearfix">
      {{'全部宝贝'|translate}}
      <div class="right">
        <a mat-raised-button color="primary" (click)="export()">{{'下载'|translate}}</a>
      </div>
    </mat-card-title>
    <div class="divider"></div>
    <ngx-busy [busy]="busy"></ngx-busy>
    <table class="responsive-table bordered highlight" id="shopExport">
      <thead>
        <tr>
          <th *ngFor="let column of columns;let $index = index" st-sort [st-sort]="column" [st-sort-data]="param" (sortChanged)="sortChanged($event)" [innerHTML]="column.title |translate" [ngClass]="column.class"> </th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let prod of vm.table.products | paginate: { itemsPerPage: param.rows, currentPage: vm.page, totalItems: vm.table.count,id: 'products_table'};let $index = index;">
          <td>
            <a href="https://item.taobao.com/item.htm?id={{prod.numberId}}" target="_blank">
              <img [src]="prod.picUrl" class="w80">
            </a>
          </td>
          <td style="max-width: 240px;">
            <div class="product-p">
              <a href="javascript:;" class="product-title linkHover normal" [title]="prod.title" [innerHTML]="prod.title"></a>
              <!-- taobao -->
              <a class="grey-text" title="去淘宝" href="https://item.taobao.com/item.htm?id={{prod.numberId}}" target="_blank"><i class="fa fa-external-link cp f16"></i></a>
            </div>
            <p class="nick-p">
              <span class="taobao-icon" [ngClass]="{'icon-service-tianmao':prod.shopType=='商城','icon-service-taobao':prod.shopType=='C店','icon-service-tianmaoguoji':prod.shopType=='天猫国际','icon-fest-quanqiugou':prod.shopType=='全球购'}"></span>
              <a href="javascript:;" class="mr4 linkHover normal">{{prod.shopName}}</a>
              <!-- taoabao -->
              <a class="grey-text" title="去淘宝" href="http://store.taobao.com/shop/view_shop.htm?user_number_id={{prod.uid}}" target="_blank"><i class="fa fa-external-link cp f16"></i></a>
            </p>
          </td>
          <!-- 品牌 -->
          <td *ngIf="!prod.brandName">-</td>
          <td *ngIf="prod.brandName">
            <!-- 查看品牌详情 -->
            <span [innerHTML]="prod.brandName"></span>
          </td>
          <td><span class="text-overflow" [title]="prod.catName | categoryName">{{prod.catName | categoryName}}</span></td>
          <!-- 日销 -->
          <td><span class="tm-yen">¥</span>{{prod.sellMoney | bigNum}}</td>
          <td>{{prod.sellAmount||0 | number:'1.0-0' }}</td>
          <td><span class="tm-yen">¥</span>{{prod.price | number:'1.0-2'}}</td>
          <!-- 月销 -->
          <td><span class="tm-yen">¥</span>{{prod.monthSellMoney | bigNum}}</td>
          <td>{{prod.monthSellAmount||0 | number:'1.0-0' }}</td>
          <td> <span class="tm-yen">¥</span>{{prod.monthPrice | number: '1.0-1'}}</td>
          <!-- time -->
          <!-- <td *ngIf="vm.param.newPorduct">{{prod.publishTime | date:'yyyy-MM-dd'}}</td> -->
        </tr>
        <tr *ngIf="vm.table.products.length ==0">
          <td colspan="10" class="center-align">{{'暂无数据'|translate}}</td>
        </tr>
      </tbody>
    </table>
    <pagination-controls class="center-align pt20" id="products_table" (pageChange)="pageChanged($event)" maxSize="9" directionLinks="true" autoHide="true">
    </pagination-controls>
  </mat-card>
</div>
